<template>
	<view class="trend">
		<!-- 头部导航 -->
		<view class="w-750 w-bj-white" style="position: fixed; top: 0; left: 0; z-index: 999;">
			<view class="h-100 w-row-justify-between-align">
				<view class="wh-80 w-row-center" @click="routerBack()">
					<image class="wh-40" src="../../../static/gane/goBack-icon.png"></image>
				</view>
				<view class="flex1 h-100 w-row-center w-wz-conts font-36">
					<text>{{typeText[type - 1]}}</text>
				</view>
				<view class="wh-80 w-row-center">
					<!-- <uni-datetime-picker type="datetimerange" @change="changeTiem">
						<image class="wh-50" src="../../../static/gane/rq.png"></image>
					</uni-datetime-picker> -->
				</view>
			</view>
		</view>
		<view class="bwh-120"></view>
		<!-- 头部导航结束 -->
		
		<view class="content-box padding-top-xs">
			<view class="bg-white full-width fl trend-cell">
				<view class="items">
					<view class="w-30 text-bold item">
						期数
					</view>
					<view class="w-70 text-bold item">
						开奖号码
					</view>
				</view>
				
				<view class="items" v-for="(item,index) in tableData" :key="index">
					<view class="w-30 text-bold item">
						{{item.issue}}
					</view>
					<view class="w-70 text-bold item">
						<span v-for="(i,key) in item.numarr" :key="key" class="ball cover neckB" :class="`${key<item.numarr.length - 1 ? '':'last-'}` + i.color">
							{{i.number >= 10 ? i.number : '0' + i.number}}
							<b>{{getNumName(i.name)}}</b>
						</span>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import $H from '@/pages/common/request.js'
	export default {
		data () {
			return {
				typeText: ['极速六合彩','香港六合彩','澳门六合彩'],
				type: 1,
				tableData: [],
				start_time: '',
				end_time: '',
				pagenum: 1,
				ispage: false
				
			}
		},
		onLoad(option){
			this.type = option.type || 1
			this.getUserAgentLog()
		},
		onReachBottom() {
		
			uni.showLoading({
				title: '加载数据中...'
			});
			this.pagenum++
			let timer = setInterval(() => {
				uni.hideLoading();
				if (this.tableData.length == this.total) {
					this.ispage = true
				} else {
					this.getUserAgentLog()
				}
				clearTimeout(timer)
			}, 600);
		
		},
		methods: {
			// 渲染不同的球体颜色
			getCol(i) {
				const colorList = ['red', 'blue', 'green'];
				const index = Math.floor((i - 1) / 2) % colorList.length;
				return colorList[index]
			},
			
			getNumName(title){
				const str = title;
				const parts = str.split('/');
				const valueAfter = parts[1];
				return valueAfter
			},
			
			getUserAgentLog(isbool) {
				const urlArr = ['/app_user_lhc_redord', '/app_user_xianggang_redord','/app_user_aomen_redord']
				$H.post(urlArr[this.type - 1], {
					pagenum: this.pagenum,
					start_time: this.start_time,
					end_time: this.end_time,
				}).then((res) => {
					if (res.code == 200) {
						if(isbool){
							if(res.data.data.length == 0){
								this.tableData = []
							}else{
								this.tableData.push(...res.data.data)
							}
						}else{
							this.tableData.push(...res.data.data)
							this.total = res.data.total				
						}
						
						
					} else {
						return uni.showToast({
							title: res.msg,
							duration: 1000,
							icon: 'none'
						});
					}
				})
			},
			
		}
	}
</script>

<style scoped lang="scss">
	.w-row-center {
		color: #323233 !important;
	}
	.trend-cell{
		.items{
			width: 100%;
			display: flex;
		}
		.item{
			    float: left;
			    line-height: 10.66667vw;
			    padding: 0 1.33333vw;
			    border-top: 1px solid #eee;
			    border-left: 1px solid #eee;
			    text-align: center;
				
				// &>span{
				// 	margin-left: 10rpx;
				// }
		}
		
		.w-30 {
		    width: 30%;
		}
		
		.w-70 {
		    width: 70%;
		}
		
		
		.ball {
			width: 8.26667vw;
			height: 8.26667vw;
			line-height: 8.26667vw;
			font-size: 4vw;
			display: inline-block;
			color: #000;
			transform: translateY(0);
			position: relative;
		}
		
		.neckB {
			&>b {
				position: absolute;
				right: -.53333vw;
				bottom: -2.66667vw;
				font-size: 3.2vw;
				color: #FFD700;
				z-index: 2;
				text-shadow: 0 1px .8vw rgb(0 0 0 / 60%);
				font-weight: 800;
			}
		}
		
		.blue {
			background-image: url('@/static/gane/blue.png');
		}
		
		.red {
			background-image: url('@/static/gane/red.png');
		}
		
		.green {
			background-image: url('@/static/gane/green.png');
		}
		
		.last-blue {
			color: #fff !important;
			background-image: url('@/static/gane/last-blue.png');
		}
		
		.last-red {
			color: #fff !important;
			background-image: url('@/static/gane/last-red.png');
		}
		
		.last-green {
			color: #fff !important;
			background-image: url('@/static/gane/last-green.png');
		}
	}
</style>